<script setup>
import { computed, defineProps } from "vue"
const props = defineProps({
	name: {
		type: String,
		default: "praise",
	},
	size: {
		type: String,
		default: "1em",
	},
	color: {
		type: String,
		default: "currentColor",
	},
	backgroundImage: {
		type: String,
		default: "none",
	},
})
const iconName = computed(() => `#icon-${props.name}`)
</script>
<template>
	<svg
		aria-hidden="true"
		class="svg-icon"
		:style="{ fontSize: size, color, backgroundImage }"
		fill="#9c1717">
		<use :xlink:href="iconName" />
	</svg>
</template>

<style>
.svg-icon {
	width: 1em;
	height: 1em;
	vertical-align: -0.15em;
	fill: currentColor;
	overflow: hidden;
}
</style>
